<script>
import sheep from '@/sheep';

export default {
  name: "timeListDetail",
  props:{
    width:{
      type:String,
      default:'702rpx'
    },
    height:{
      type:String,
      default:'244rpx'
    }
  },
  computed: {
    IMG_URL() {
      return sheep.$store('AI').sq_image_path
    }
  },
}
</script>

<template>
  <view class="oldYellowCalendar_content flex flex-column align-center" style="margin-top: 20rpx;" :style="{
    width:width,
    minHeight:height,
  }">
    <slot name="content"></slot>
    <image class="oldYellowCalendar_content_upperLeft" :src="`${IMG_URL}/chineseSurname/cornerMark.png`"></image>
    <image class="oldYellowCalendar_content_upperRight" :src="`${IMG_URL}/chineseSurname/cornerMark.png`"></image>
    <image class="oldYellowCalendar_content_lowerLeft" :src="`${IMG_URL}/chineseSurname/cornerMark.png`"></image>
    <image class="oldYellowCalendar_content_lowerRight" :src="`${IMG_URL}/chineseSurname/cornerMark.png`"></image>
  </view>
</template>

<style scoped lang="scss">
.oldYellowCalendar_content {
  position: relative;
  border: 2rpx solid #BF8257;
  overflow: hidden;

  .oldYellowCalendar_content_upperLeft {
    position: absolute;
    top: -2rpx;
    left: -2rpx;
    width: 51rpx;
    height: 55rpx;
  }

  .oldYellowCalendar_content_upperRight {
    position: absolute;
    top: -2rpx;
    right: -2rpx;
    width: 51rpx;
    height: 55rpx;
    transform: rotate(90deg);
  }

  .oldYellowCalendar_content_lowerLeft {
    position: absolute;
    bottom: -2rpx;
    left: -2rpx;
    width: 51rpx;
    height: 55rpx;
    transform: rotate(270deg);
  }

  .oldYellowCalendar_content_lowerRight {
    position: absolute;
    bottom: -2rpx;
    right: -2rpx;
    width: 51rpx;
    height: 55rpx;
    transform: rotate(180deg);
  }
}
</style>